/* Свойства для темных и светлых режимов */

.app[data-theme="light"] {
    --color-bg-body: #F5F5F5;
    --color-bg-component: white;
    --color-txt: #313131;
    --color-main: #0E91EE;
    --color-addition-access: #00F083;
    --color-addition-warn: #FF9000;
    --color-addition-err: #FF4500;
    --color-disable: #E5E5E5;
    --color-side: #AEAEAE;
    --color-overlay: rgba(255, 255, 255, 0.7);
    --color-shadow: rgba(187, 187, 187, 0.25);
    --shadow-component: 0 10px 20px var(--color-shadow);
}

.app {
    color: var(--color-txt);
    background-color: var(--color-bg-body);
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Общие свойства */

.app-wrap {
    padding: 30px;
}

span {
    color: var(--color-main);
}

.txt--orange {
    color: var(--color-addition-warn);
}

.txt--logo {
    font-size: var(--size-font-logo);
}

.txt--title-small {
    font-size: var(--size-font-title-small);
}

.component {
    box-shadow: var(--shadow-component);
    border-radius: var(--size-border-rad-component);
    padding: var(--size-padding-component);
    background-color: var(--color-bg-component);
    height: fit-content;
}

/* Локальные свойства */

.app section {
    display: flex;
    padding-top: 20px;
    padding-bottom: 0;
    flex-grow: 1;
}
